<template>
  <div class="app-container">
     <!-- 搜索栏目 -->
    <div class="filter-container add1">
      <el-form :inline="true" :model="formQuery" class="demo-form-inline"> 
        <el-form-item label="论文编号 ">
          <el-input v-model="formQuery.paper_id" placeholder="论文编号 "></el-input>
        </el-form-item>
         <el-form-item label="论文标题 ">
          <el-input v-model="formQuery.title_zh" placeholder="论文标题 "></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="_search">
              搜索
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table class="tabless" :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
              highlight-current-row :row-class-name="tableRowClassName" @sort-change='sortChange' @selection-change="handleSelectionChange">
    
      <el-table-column align="center" label="序号" width="80" fixed>
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"> </span>
        </template>
      </el-table-column>
      <!-- 表格主要列名称 -->
      <!-- 添加排序sortable='custom' sortable='customsss' -->
      <el-table-column align="center" prop="paper_id" label="论文编号"  width="120px"></el-table-column>
      <el-table-column align="center" prop="title_zh" label="论文标题中文" width="120px"  ></el-table-column>
      <el-table-column align="center" prop="title_en" label="论文标题英文" width="120px" ></el-table-column>
      <el-table-column align="center" prop="keywords_zh" label="论文关键词中文" width="120px" ></el-table-column>
      <el-table-column align="center" prop="keywords_en" label="论文关键词英文" width="120px"  ></el-table-column>
      <el-table-column align="center" prop="abstract_zh" label="论文摘要中文"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="abstract_en" label="论文摘要英文"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="authors_zh" label="作者列表中文"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="authors_en" label="作者列表英文"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="authors_affi_zh" label="作者单位列表中文"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="authors_affi_en" label="作者单位列表英文"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="emails_list" label="作者Email列表"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="corresponding_author" label="通信作者"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="corresponding_author_email" label="通信作者Email"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="type" label="文献类型"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="doi" label="论文DOI编号"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="language" label="语言"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="journal_conf" label="期刊/会议名称"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="journal_conf_en" label="期刊/会议名称英文"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="volume" label="卷"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="issue" label="期"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="page_start" label="起始页码"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="page_end" label="结束页码"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="article_number" label="文献号"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="issn" label="期刊或会议集ISSN"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="isbn" label="国际标准书号ISBN"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="paper_year" label="出版年份"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="cited_number" label="被引频次"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="pdf" label="pdf全文链接"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="paper_page_url" label="论文信息页面链接"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="funding" label="资助致谢"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="research_direction" label="研究方向"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="conf_location" label="会议地点"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="conf_time" label="会议时间"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="source" label="论文数据来源"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="included" label="论文收录信息"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="paper_order" label="排序"  width="120px" ></el-table-column>
      <el-table-column align="center" prop="author_link" label="页面链接"  width="120px" ></el-table-column>
      <el-table-column align="center" prop = "create_at"  label="创建时间" width="120px"  :formatter="_dateFormat" ></el-table-column>
       <el-table-column align="center" prop = "mark"  label="备注" width="170px"  ></el-table-column>
    </el-table>
    <!-- 以上为主界面内容 -->
    <el-pagination
      @size-change="_handleSizeChange"
      @current-change="_handleCurrentChange"
      :current-page="listQuery.pageNum" 
      :page-size="listQuery.pageRow"
      :total="totalCount"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      class="pagination">
    </el-pagination>
  </div>
</template>
<script>

  export default {
    name: 'paper',
    data() {
      return {
        formQuery:{
          paper_id:'',
          title_zh:'',
        },
        list: [],//表格的数据
        listLoading: false,//数据加载等待动画
        totalCount:0,
        listQuery: {
          pageNum: 1,//页码
          pageRow: 10,//每页条数
        },
      }
    },
    mounted() {
      this._asynsGetTableData();
    },
    methods: {
      getIndex($index) {
        //表格序号
        return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'warning-row';
        } else if (rowIndex % 2 === 0) {
          // return 'success-row';
        }
        return '';
      },
      sortChange(){

      },
      handleSelectionChange(){

      },
      _dateFormat(row, column, cellValue, index){
          return new Date(cellValue).Format('yyyy-MM-dd');
      },
      _handleSizeChange(val){
         this.listQuery.pageRow = val;
         this._asynsGetTableData()
      },
      _handleCurrentChange(val){
        
         this.listQuery.pageNum = val;
         console.log(this.listQuery)
         this._asynsGetTableData() 
      },
      _search(){
         // 重制页面申请条件listQuery
         this.listQuery = { pageNum: 1,pageRow: 10};
         this._asynsGetTableData();
      },
      _asynsGetTableData(){
         this.listLoading = true;
         this.api({
                    url: "/statistical/getPaperList",
                    method: "post",
                    headers:{
                      'content-type':'application/x-www-form-urlencoded'
                    },
                    data:this.$qs.stringify({
                      ...this.listQuery,
                      ...this.formQuery
                    })
            }).then(data => {
                this.listLoading = false;
                this.list = data.list;
                this.totalCount = data.totalCount;
            })
      },

    },
  }
</script>

<style lang="scss" scoped>
    .app-container{
      padding: 20px;
    }
</style>
